import { useState } from 'react'
import { Form, Input, Button, message, Select } from 'antd';
import PhoneCodeInput from '@/components/PhoneCodeInput/index'
import { getVerifyCode } from '@/apis/getVerifyCode';
import { useNavigate } from 'react-router-dom';
import Style from './index.less';
import LoginWrap from '@/components/LoginWrap';
import IconBox from "@/pages/login/IconBox";
import icon_user from '@/assets/image/icon-user.png'
import icon_code from '@/assets/image/icon-code.png'
import { forgotPassword } from '@/apis/user';

const ForgetPwd = () => {
    const navigate = useNavigate();
    const [form] = Form.useForm();
    const [loginSatusVisible, setloginSatusVisible] = useState(false)//账号选择框
    const [loginSelectValue, setloginSelectValue] = useState('')
    const [multiAccountList, setmultiAccountList] = useState<string[]>([])
    const [fristValues, setfristValues] = useState<any>({})
    // 下一步
    async function onOneFinish(values: any) {
        let res = await forgotPassword({ ...values })
        if (res.data.checkAccountFlag && res.data.multiAccountList) {
            setmultiAccountList(res.data.multiAccountList)
            setloginSelectValue(res.data.multiAccountList[0])
            setloginSatusVisible(true)
            setfristValues(values)
            return
        } else {
            message.success("修改密码成功")
            navigate('/login')
        }
    }
    //获取手机号
    async function getPhoneCode() {
        let phone = form.getFieldValue('mobile') as string
        if (!phone) {
            message.error('请输入手机号')
            return false
        }
        try {
            await getVerifyCode({ mobile: phone, type: "b_forget_password" })
            message.success('获取验证码成功')
            return true
        } catch (e) {
            return false
        }
    }
    //选中用户登陆
    async function onSelectUserLogin() {
        await forgotPassword({ ...fristValues, loginName: loginSelectValue })
        message.success("修改密码成功")
        navigate('/login')
    }
    return (
        <LoginWrap>
            {
                loginSatusVisible ?
                    <div className={Style.login_status_form}>
                        <div className={Style.login_status_form_title}>请选择您的登录账户</div>
                        <div>
                            <Select placeholder='请选择账户'
                                style={{ width: "100%", marginBottom: '24px', height: '46px' }}
                                value={loginSelectValue}
                                onChange={e => setloginSelectValue(e)}
                                options={multiAccountList.map(item => ({ label: item || '', value: item }))}></Select>
                        </div>
                        <Button type="primary" style={{ width: "100%", height: '44px' }} onClick={onSelectUserLogin}>确认</Button>
                    </div> :
                    <>
                        <div className={Style.forgetwrap} >
                            <h1 className={Style.forgetTitle}>忘记了您的密码？</h1>
                            <h2 className={Style.forgetTips}>身份证验证成功，请重新设置您的密码后点击</h2>
                        </div>
                        <Form layout="vertical" form={form} className={Style.form} onFinish={onOneFinish}>
                            <Form.Item name="mobile" rules={[{ required: true, message: '请输入手机号' }]}>
                                <Input size="large" maxLength={11} placeholder="请输入手机号" prefix={<IconBox icon={icon_user} />} />
                            </Form.Item>
                            <Form.Item name="verifyCode" rules={[{ required: true, message: '请输入手机号验证码' }]} >
                                <PhoneCodeInput getPhoneCode={getPhoneCode} prefix={<IconBox icon={icon_code} />} />
                            </Form.Item>

                            <Form.Item name="password" rules={[{ required: true, message: '请输入新密码' }, { max: 20, message: "最大不超过20位" }, { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\w]{8,}$/, message: '密码至少8个字符，且必须包含字母和数字' }]}>
                                <Input size="large" placeholder="输入新密码" />
                            </Form.Item>
                            <Form.Item name="confirmPassword" rules={[{ required: true, message: '请确认新密码' }, { max: 20, message: "最大不超过20位" }, { pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\w]{8,}$/, message: '密码至少8个字符，且必须包含字母和数字' }]}>
                                <Input size="large" placeholder="确认新密码" />
                            </Form.Item>
                            <p style={{ fontSize: 14, color: '#31363F', marginBottom: 28 }}>*密码至少8个字符，且必须包括字母和数字。最长不可超过20个字符</p>
                            <Button htmlType="submit" type="primary" block size="large" style={{ fontSize: "16px" }}>确定</Button>
                        </Form>
                    </>
            }
        </LoginWrap>
    )
}
export default ForgetPwd